<template>
  <div class="h100">
    <div class="edit-department">
      <div class="rec-detail-title">
        我的位置：
        <span @click="gohome()">首页</span>
        >
        <span @click="routerpush()">注册</span>
        >
        <span v-if="$route.query.id == 1">服务供应商注册</span>
        <span v-if="$route.query.id == 2">服务采购商注册</span>
      </div>
      <a-spin :spinning="spinning" tip="正在加载数据中...">
        <a-form :form="form">
          <a-row :gutter="10">
            <a-col :span="8">
              <a-form-item label="电话号码" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'LoginName',
                    {
                      rules: [
                      { required: false, message: '', whitespace: true, trigger: 'change' },
                        { validator: validatePhone },
                      ],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入账号"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="密码" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input-password 
                  v-model=PassWord
                  placeholder="请输入密码"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="再次输入密码" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input-password 
                  v-decorator="[
                    'PassWord',
                    {
                      rules: [
                        { required: true, message: '', whitespace: true, trigger: 'change' },
                        { validator: validatePassWord },
                      ],

                    },
                  ]"
                  autocomplete="off"
                  placeholder="请再次输入密码"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="公司名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'GSNAME',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入公司名称"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="法人代表" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'FRDB',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入法人代表"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="身份证号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'SFZH',
                    {
                      rules: [
                        { required: true, message: '', whitespace: true, trigger: 'change' },
                        { validator: validateIDCard },
                      ],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入身份证号"
                />
              </a-form-item>
            </a-col>
            <!-- <a-col :span="8">
              <a-form-item label="联系方式" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'LXFS',
                    {
                      rules: [
                        { required: false, message: '', whitespace: true, trigger: 'change' },
                        { validator: validatePhone },
                      ],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入联系方式"
                />
              </a-form-item>
            </a-col> -->
            <a-col :span="8">
              <a-form-item label="需求描述" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'XQMS',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入需求描述"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="其他要求" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
                <a-input
                  v-decorator="[
                    'QTYQ',
                    {
                      rules: [{ required: true, message: '', whitespace: true, trigger: 'change' }],
                    },
                  ]"
                  autocomplete="off"
                  placeholder="请输入其他要求"
                />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="公司地址" :labelCol="{ span: 2 }" :wrapperCol="{ span: 14 }">
                <a-input-group compact class="a-df">
                  <a-cascader
                    :options="pcaTextArr"
                    placeholder="请选择地址"
                    v-model="addressOptions">
                  </a-cascader>
                  <a-input v-model="addressInput" style="width: 50%;" placeholder="请填写详细地址"/>
                </a-input-group>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-col :span="12">
                <a-form-item label="公司logo上传" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                  <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :headers="headers"
                    :show-upload-list="false"
                    :action="action"
                    @change="handleChange1"
                  >
                    <img v-if="imageUrl" :src=" host + imageUrl" alt="avatar" />
                    <div v-else>
                      <div class="ant-upload-text">上传</div>
                    </div>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="公司资质上传" :labelCol="{ span: 8 }" :wrapperCol="{ span: 16 }">
                  <a-upload
                    :action="action"
                    :headers="headers"
                    list-type="picture-card"
                    :file-list="fileList"
                    @preview="handlePreview"
                    @change="handleChange"
                  >
                    <div v-if="fileList.length < 1">
                      <a-icon type="plus" />
                      <div class="ant-upload-text">上传</div>
                    </div>
                  </a-upload>
                  <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
                  </a-modal>
                </a-form-item>
              </a-col>
            </a-col>
            <a-col :span="24"> </a-col>
          </a-row>
        </a-form>
        <button class="sub-btn" @click="handleSubmit">提交</button>
      </a-spin>
      <!-- </a-modal> -->
    </div>
  </div>
</template>

<script>
import { validPassword, validAccountNumber, validChineseChar, validIDCard, validTelphone } from '@/utils/validate'
import { postAppQYZCAddApi } from '@/api/resService'
import storage from 'store'
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'membership',
  components: {},
  data() {
    return {
      spinning: false,
      previewVisible: false,
      previewImage: '',
      PassWord:'',
      fileListtt: '',
      host: process.env.VUE_APP_API_BASE_URL,
      action: process.env.VUE_APP_API_BASE_URL + '/api/uploadFile/Wu_UploadPictures',
      headers: {
        Authorization: storage.get(ACCESS_TOKEN),
        GF: this.$store.getters.userid,
      },
      pcaTextArr,
      addressOptions: [],
      GSDZ:'',
      addressInput: '',
      imageUrl: '',
      form: this.$form.createForm(this, { name: 'user' }),
      fileList: [],
    }
  },
  methods: {
    displayContent(text) {
      if (text <= 100) {
        return text
      }
      return text.substring(0, 100) + '...'
    },
    routerpush(){
      this.$router.push({ path: '/reception/register/index'});
    },
    handleCancel() {
      this.previewVisible = false
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    validateIDCard(rule, value, callback) {
      if (!value) {
        callback(new Error('请输入身份证号'))
      }
      if (!validIDCard(value)) {
        callback(new Error('身份证号输入有误，请重新输入'))
      }
      callback()
    },
    validatePassWord(rule, value, callback) {
      if (value != this.PassWord) {
        callback(new Error('密码输入不一致'))
      }
      callback()
    },
    validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      }
      if (!validTelphone(value)) {
        callback(new Error('联系电话输入有误，请重新输入'))
      }
      callback()
    },
    handleChange({ fileList }) {
      this.fileList = fileList
    },
    handleChange1(info) {
      console.log('info', info);
      let fileListt = [...info.fileList]
      fileListt = fileListt.slice(-1)
      fileListt = fileListt.map((file) => {
        if (file.response) {
          const url = process.env.VUE_APP_API_BASE_URL + file.response.data[0]
          this.imageUrl = file.response.data[0]
          file.url = url
        }
        return file
      })
      this.fileListtt = fileListt
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    gohome() {
      this.$router.push({ path: '/reception/Introduction/index' })
    },
    handleSubmit() {
      const {
        form: { validateFields, $message },
      } = this
      validateFields({ force: true }, (err, values) => {
        this.addressOptions.map(item =>{
          this.GSDZ += item + '/'
        })
        postAppQYZCAddApi(
          Object.assign({}, values, {
            // YHID: this.$store.getters.userid,
            LXFS:values.LoginName,
            GSDZ:this.GSDZ + this.addressInput,
            Fid: this.$route.query.id,
            Logo: this.imageUrl,
            GSZZZS: this.fileList[0].response.data[0],
          })
        )
          .then((res) => {
            if (res.code === 200) {
              this.$notification['success']({
              message: '成功',
              description: res.msg,
              duration: 8
            })}else if (res.code === 201) {
              this.$notification['error']({
              message: '失败',
              description: res.msg,
              duration: 8
            })
              this.handleCancel()
              this.$router.push({ path: '/reception/Introduction/index' })
              // this.$parent.$parent.$refs.table.refresh()
            } else {
              $message.error('提交失败', res.msg)
            }
          })
          .catch((err) => {
            $message.error(err, 3)
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
  },
  mounted() {},
}
</script>

<style lang="less" scoped>
.avatar-uploader{
  img{
    width: 80px;
    height: 80px;
  }
}
.equipment-top {
  height: 60px;
  background: #fff;
  padding: 10px 100px;
  cursor: pointer;
  img {
    height: 40px;
    display: block;
  }
}
.edit-department {
  margin: 0 auto;
  width: 1600px;
  padding-top: 20px;
  .rec-detail-title{
    margin-left: 50px;
    margin-bottom:10px ;
    span {
      cursor: pointer;
    }
  }
}
.equipment-bac-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  img {
    height: 180px;
    width: 100%;
  }
}
.sub-btn {
  margin: 0 auto;
  display: block;
  background: #674de8;
  color: #fff;
  cursor: pointer;
  padding: 10px 30px;
  border-radius: 5px;
  border: none;
}
</style>
